<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<h3>添加品牌</h3>
<form action="" method="post">
    品牌名称：<input id="brandName" name="brandName"><br>
    企业名称：<input id="companyName" name="companyName"><br>
    排序：<input id="ordered" name="ordered"><br>
    描述信息：<textarea rows="5" cols="20" id="description" name="description">fsdfsdf</textarea><br>
    状态：
    <input type="radio" name="status" value="0">禁用
    <input type="radio" name="status" value="1">启用<br>

    <input id="btn" type="button" value="提交" onclick="postBrand()">
    <span id="message" style="display: none; color: red">添加失败</span>
</form>

<script>
    // 1.给按钮绑定单击事件
    function postBrand() {
        // alert("准备提交!");

        // 2.创建JavaScript对象保存要提交的数据
        let brand = {
            brandName: "",
            companyName: "",
            ordered: "",
            description: "",
            status: ""
        };

        // 3.获取表单数据
        brand.brandName = document.getElementById("brandName").value; // 获取品牌输入框中的数据,放到brand对象中
        brand.companyName = document.getElementById("companyName").value;
        brand.ordered = document.getElementById("ordered").value;
        brand.description = document.getElementById("description").innerHTML;

        let statuses = document.getElementsByName("status");
        for (let st of statuses) {
            if(st.checked) {
                brand.status = st.value;
            }
        }

        // 4.发送Ajax请求
        axios.post("http://localhost:8080/ajax-brand-demo/addServlet", brand)
            .then(function (resp) {
                // 添加成功返回"success",否则就是添加失败
                if (resp.data == "success") {
                    // 成功,跳转到查询所有的页面
                    location = "http://localhost:8080/ajax-brand-demo/brand.html";
                } else {
                    // 在网页上显示,服务器繁忙
                    document.getElementById("message").style.display = '';
                }
            });
    }


</script>

</body>
</html>